<template>
  <view class="container" 
        :class="{ 'fullscreen': isFullscreen }" 
        :style="{ backgroundColor: backgroundColor }"
        @tap="handleScreenTap">
    <!-- 弹幕预览区域 -->
    <view class="marquee-preview" :class="{ 'fullscreen-preview': isFullscreen }">
      <view class="marquee-content" 
            :style="{ 
              color: textColor,
              fontSize: isFullscreen ? (fontSize * 2) + 'px' : fontSize + 'px',
              animation: isFullscreen ? `marquee-fullscreen ${speed * 2}s linear infinite` : `marquee-normal ${speed}s linear infinite`
            }">
        {{ text || '欢迎使用全屏弹幕' }}
      </view>
    </view>

    <!-- 控制面板 -->
    <view class="control-panel" v-if="!isFullscreen">
      <!-- 文本输入 -->
      <input class="text-input" 
             type="text" 
             v-model="text" 
             placeholder="请输入弹幕内容" />

      <!-- 颜色选项 -->
      <view class="option-group">
        <text class="option-title">文字颜色</text>
        <view class="color-options">
          <view v-for="color in textColors" 
                :key="color"
                class="color-option"
                :class="{ selected: textColor === color }"
                :style="{ backgroundColor: color }"
                @tap="setTextColor(color)">
          </view>
        </view>
      </view>

      <!-- 字体大小 -->
      <view class="option-group">
        <text class="option-title">字体大小</text>
        <view class="size-options">
          <view v-for="size in fontSizes" 
                :key="size"
                class="size-option"
                :class="{ selected: fontSize === size }"
                @tap="setFontSize(size)">
            {{ size }}
          </view>
        </view>
      </view>

      <!-- 背景颜色 -->
      <view class="option-group">
        <text class="option-title">背景颜色</text>
        <view class="color-options">
          <view v-for="color in bgColors" 
                :key="color"
                class="color-option"
                :class="{ selected: backgroundColor === color }"
                :style="{ backgroundColor: color }"
                @tap="setBackgroundColor(color)">
          </view>
        </view>
      </view>

      <!-- 滚动速度 -->
      <view class="option-group">
        <text class="option-title">滚动速度</text>
        <view class="speed-options">
          <view v-for="(spd, label) in speeds" 
                :key="label"
                class="speed-option"
                :class="{ selected: speed === spd.value }"
                @tap="setSpeed(spd.value)">
            {{ label }}
          </view>
        </view>
      </view>

      <!-- 控制按钮 -->
      <view class="button-group">
        <button @tap.stop="toggleFullscreen" class="control-button">
          {{ isFullscreen ? '退出全屏' : '全屏' }}
        </button>
        <button @tap.stop="toggleLock" class="control-button">
          {{ isLocked ? '解锁' : '锁定' }}
        </button>
      </view>

      <dg-safe-bottom></dg-safe-bottom>
    </view>

    <!-- 锁定状态下的解锁按钮 -->
    <view v-if="isFullscreen && isLocked && showUnlockIcon" 
          class="unlock-button" 
          @tap.stop="handleUnlock">
      <text class="unlock-icon">🔒</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 状态管理
const text = ref('')
const textColor = ref('#FFFFFF')
const fontSize = ref(40)
const backgroundColor = ref('#FF66CC')
const direction = ref('normal')
const speed = ref(10)
const isFullscreen = ref(false)
const isLocked = ref(false)
const showUnlockIcon = ref(false)

// 预设选项
const textColors = ['#FFFFFF', '#FFD700', '#FF4500', '#00FF00', '#00BFFF']
const fontSizes = [20, 30, 40, 50, 60]
const bgColors = [
  '#FF66CC', // 甜蜜粉红
  '#9966FF', // 梦幻紫色
  '#66CCFF', // 清新蓝色
  '#FF9966', // 活力橙色
  '#99CC66'  // 清新绿色
]
const directions = [
  { label: '向左', value: 'normal' },
  { label: '向右', value: 'reverse' }
]
const speeds = [
  { label: '慢速', value: 15 },
  { label: '正常', value: 10 },
  { label: '快速', value: 5 }
]

// 方法
const setTextColor = (color) => textColor.value = color
const setFontSize = (size) => fontSize.value = size
const setBackgroundColor = (color) => backgroundColor.value = color
const setDirection = (dir) => direction.value = dir
const setSpeed = (spd) => speed.value = spd

// 处理屏幕点击
const handleScreenTap = () => {
  if (!isFullscreen.value) return
  
  if (isLocked.value) {
    // 锁定状态下点击屏幕显示解锁图标
    showUnlockIcon.value = true
    // 3秒后自动隐藏解锁图标
    setTimeout(() => {
      showUnlockIcon.value = false
    }, 3000)
  } else {
    // 非锁定状态下点击屏幕退出全屏
    isFullscreen.value = false
  }
}

// 切换全屏
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
  if (!isFullscreen.value) {
    isLocked.value = false
    showUnlockIcon.value = false
  }
}

// 切换锁定
const toggleLock = () => {
  isLocked.value = true
  isFullscreen.value = true
  showUnlockIcon.value = false
}

// 处理解锁
const handleUnlock = () => {
  if (isLocked.value) {
    isLocked.value = false
    isFullscreen.value = false
    showUnlockIcon.value = false
  }
}
</script>

<style>
/* 小马宝莉主题配色 */
:root {
  --primary-color: #8A4FFF;      /* 紫色 - 暮光闪闪 */
  --secondary-color: #FF6EFF;    /* 粉色 - 苹果嘉儿 */
  --accent-color: #4DFFFF;       /* 青色 - 彩虹冲刺 */
  --background-color: #F0E6FF;   /* 淡紫色背景 */
  --text-color: #5A2D81;         /* 深紫色文字 */
}

page {
  background: linear-gradient(135deg, var(--background-color), #FFFFFF);
}
 
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(138, 79, 255, 0.2);
}

.marquee-preview {
  flex: 1;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: 33.33vh;
  display: flex;
  align-items: center;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.marquee-content {
  white-space: nowrap;
  position: absolute;
  width: max-content;
  text-align: center;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  text-shadow: 2rpx 2rpx 5rpx rgba(0,0,0,0.3);
}

.control-panel {
  flex: 2;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(15rpx);
  -webkit-backdrop-filter: blur(15rpx);
  overflow-y: auto;
  box-sizing: border-box;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}

.text-input {
  height: 70rpx;
  margin-bottom: 20rpx;
  padding: 0 20rpx;
  border: 2rpx solid var(--primary-color);
  border-radius: 35rpx;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10rpx);
  -webkit-backdrop-filter: blur(10rpx);
  color: var(--text-color);
  font-size: 28rpx;
  text-align: center;
  box-shadow: 0 4rpx 10rpx rgba(138, 79, 255, 0.1);
}

.option-group {
  background-color: rgba(255, 255, 255, 0.3);
  border: 2rpx solid var(--secondary-color);
  border-radius: 20rpx;
  padding: 15rpx;
  margin-bottom: 20rpx;
  transition: all 0.3s ease;
}

.option-title {
  color: var(--primary-color);
  font-weight: bold;
  text-align: center;
  margin-bottom: 10rpx;
  font-size: 32rpx;
}

.color-options, .size-options, .speed-options {
  display: flex;
  gap: 15rpx;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.color-option, .size-option, .speed-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  border: 3rpx solid var(--primary-color);
  background-color: rgba(255, 255, 255, 0.8);
  color: var(--text-color);
  font-size: 24rpx;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 10rpx rgba(138, 79, 255, 0.1);
}

.color-option.selected, 
.size-option.selected, 
.speed-option.selected {
  background-color: var(--primary-color);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 6rpx 15rpx rgba(138, 79, 255, 0.3);
}

.button-group {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.control-button {
  flex: 1;
  height: 80rpx;
  background-color: #FFFFFF;
  color: var(--text-color);
  border: none;
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 6rpx 15rpx rgba(138, 79, 255, 0.3);
}

.control-button:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 10rpx rgba(138, 79, 255, 0.2);
}

.unlock-button {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: 150rpx;
  height: 150rpx;
  background-color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 30rpx rgba(138, 79, 255, 0.3);
}

.unlock-icon {
  font-size: 80rpx;
  color: var(--text-color);
  text-shadow: 2rpx 2rpx 5rpx rgba(0,0,0,0.3);
}

/* 动画效果 */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.unlock-button:hover {
  animation: pulse 1s infinite;
}

@keyframes marquee-fullscreen {
  0% {
    transform: translate(-50%, -50%) rotate(90deg) translateX(100%);
  }
  100% {
    transform: translate(-50%, -50%) rotate(90deg) translateX(-100%);
  }
}

@keyframes marquee-normal {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}

.fullscreen-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  background: linear-gradient(135deg, var(--background-color), #FFFFFF);
}

.fullscreen .marquee-content {
  position: fixed;
  width: 100vh;
  height: 100vw;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(90deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10vh; /* 根据屏幕高度自适应字体大小 */
}
</style>